<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <jsp:include page="/resources/inc/pageHead.jsp" />
    <style>
        .dict {
        }

        .dict .layui-form-item {
            margin: 0px;
        }

        .dict .layui-inline {
            width: 45%;
        }
    </style>
</head>
<body>
<form class="layui-form layui-form-pane" id="_form">
    <div class="layui-form-item">
        <label class="layui-form-label">key</label>
        <div class="layui-input-block">
            <input type="text" name="keyName" lay-verify="required" autocomplete="off"
                   placeholder="请输入字典的key"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input type="text" name="description" lay-verify="required" autocomplete="off"
                   placeholder="请输入字典的描述"
                   class="layui-input">
        </div>
    </div>
    <div class="dict">
        <a id="add_tag" onclick="addValue()" href="javascript:void(0);">
            <i class="layui-icon" style="font-size: 25px; color: black;">&#xe654;</i>
        </a>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
        </div>
    </div>
</form>
<jsp:include page="/resources/inc/pageFooter.jsp" />
<script id="value" type="text/html">
    <div class="layui-form-item value-div">
        <div class="layui-inline">
            <label class="layui-form-label">字段名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">值</label>
            <div class="layui-input-block">
                <input type="text" name="value" lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <a onclick="deleteDiv(this)" href="javascript:void(0);">
            <i class="layui-icon" style="font-size:25px;color:black;">&#xe640;</i>
        </a>
    </div>
</script>

<script>
    var index = 0;
    var addValue = function () {
        var tpl = $("#value").html();
        var data = {index: index};
        laytpl(tpl).render(data, function (html) {
            $("#add_tag").before(html);
        });
        index++;
    }
    var deleteDiv = function (a) {
        var divs = $(".value-div");
        if (divs.length == 1) {
            layer.msg("至少保留一个字段");
            return;
        }
        $(a).parent().remove();
    }
    FormCommon.initForm({
        url: '${basePath}/oa/hr/dict/create',
        subContentType: "json",
        editData: function (data) {
            var dictList = [];
            var key = $("input[name='keyName']");
            var description = $("input[name='description']");
            var value = $("input[name='value']");
            var name = $("input[name='name']");
            for (var i = 0; i < value.length; i++) {
                dictList.push({
                    keyName: key.val(),
                    description: description.val(),
                    value: value[i].value,
                    name: name[i].value
                })
            }
            return dictList;
        }
    });
    $(function () {
        addValue();
    });
</script>
</body>
</html>
